<script setup>
import { ref, computed } from 'vue'
import My from '../components/mymatchmaker.vue'
import StatusCard from '../components/StatusCard.vue'
import NavBar from '@/components/NavBar.vue'
const orderTabs = ref([
  { orderState: 0, title: '我的红娘', isRender: true },
  { orderState: 1, title: '约见记录', isRender: false },
])
const navList = ref(['我的红娘', '约见记录'])
const current = ref(0)

// 高亮下标
const activeIndex = ref('0')
</script>
<template>
  <NavBar :navList="navList" @change="(index) => (current = index)" />
  <!-- 内容 -->
  <!-- 我的红娘 -->
  <view class="container">
    <My
      v-if="current === 0"
      image="../../../static/images/car.png"
      badge="专属红娘"
      name="婚恋顾问@柚子"
      :id="68"
      store="成都店"
      qrCode="../../../static/images/ewm.webp"
      phone="13540377974"
    />
  </view>
  <!-- 约见记录 -->
  <view class="status-container" v-if="current === 1">
    <StatusCard :count="0" status="已完成" statusClass="completed" />
    <StatusCard :count="0" status="进行中" statusClass="in-progress" />
    <StatusCard :count="0" status="暂停中" statusClass="paused" />
  </view>
</template>

<style scoped lang="scss">
// .container {
//   // display: flex;
//   // justify-content: center;
//   // align-items: center;
//   // padding: 20rpx;
//   // background-color: #f5f5f5;
//   // height: 100vh;
// }
.status-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  position: relative;
  top: 0;
}
.state {
  display: flex;
  justify-content: space-between;
  dl {
    display: flex;
    flex-direction: column;
    align-items: center;
    dt {
      margin: 0 auto;
      padding: 10px;
      background-color: #f1f1f1;
      border: 1px solid #ccc;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
  }
}
.order {
  background-color: red;
  text-align: center;
}

.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }
}
.cursor {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20%;
  height: 6rpx;
  padding: 0 50rpx;
  background-color: #27ba9b;
  /* 过渡效果 */
  transition: all 0.4s;
}
</style>
